import { BasicColumn, FormProps, FormSchema } from '/@/components/Table';
import { id, revision } from '/@/model/commonData';
import { NAME, MEMO, HOME_PAGE } from '/@/constant/roleConstant';
import { SEARCH_ITEM_COL_PROP } from '/@/constant';
import { getMenuTree } from '/@/api/system/permission';

export const columns: BasicColumn[] = [
  {
    title: NAME,
    dataIndex: 'name',
  },
  {
    title: HOME_PAGE,
    dataIndex: 'homePageTitle',
  },
  {
    title: MEMO,
    dataIndex: 'memo',
  },
];

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      {
        field: 'name',
        label: NAME,
        component: 'Input',
        componentProps: {},
        ...SEARCH_ITEM_COL_PROP,
      },
    ],
  };
}

const findPermissionTree = async () => {
  const data = await getMenuTree();

  const computeDisabled = (list) => {
    list.forEach((item) => {
      if (item.children && item.children.length > 0) {
        item.disabled = true;
        computeDisabled(item.children);
      }
    });
  };
  computeDisabled(data);
  return data;
};

export const formSchemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: NAME,
    required: true,
    componentProps: {},
  },
  {
    field: 'homePageId',
    component: 'ApiTreeSelect',
    label: HOME_PAGE,
    required: true,
    componentProps: {
      api: findPermissionTree,
      fieldNames: { children: 'children', label: 'title', value: 'id' },
    },
  },
  {
    field: 'memo',
    component: 'InputTextArea',
    label: MEMO,
    componentProps: {
      autoSize: { minRows: 4, maxRows: 8 },
      allowClear: true,
      showCount: true,
      maxlength: 200,
    },
  },
  revision,
  id,
];
